<template>
  <div>
    <transition name='modal'>
      <div class="wrap" v-if="state">
        <div class="box">
          <span class="close" @click="closeModal">×</span>
          <h1>{{ modalTitle }}</h1>
          <div>
            <slot name="content"></slot>
          </div>
          <div>
            <slot name="input"></slot>
          </div>
          <div class="buttons">
            <slot name="buttons"></slot>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["state", "modalTitle"],
  methods: {
    closeModal() {
      this.$emit("update:isShow", false);
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
}

.box {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #fff;
}

.close {
  float: right;
  margin-right: 8px;
  font-size: 20px;
  cursor: pointer;
}

.buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}

.modal-enter-active {
    animation: run 0.3s;
}

.modal-leave-active {
    animation: run 0.3s reverse;
}

@keyframes run {
    0% {
        transform: scale(0);
    }
    25% {
        transform: scale(0.25);
    }
    50%{
        transform: scale(0.5)
    }
    75%{
        transform: scale(0.75)
    }
    100% {
        transform: scale(1);
    }
}
</style>